<template>
  <!-- 课期管理 -->
  <div>
    <!-- aaa -->

    <div class="m-header-box">
      <h2>
        {{ $route.query.name }}
        <el-button class="u-float-right" type="primary" @click="toAddCourse()"
          >新增课期</el-button
        >
      </h2>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      header-cell-class-name="thead"
    >
      <el-table-column prop="date" label="ID">
        <template slot-scope="scope">
          <b>{{ scope.row.id }}</b>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="课程名称">
        <template slot-scope="scope">
          <h2>{{ scope.row.course_name }}</h2>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="期次">
        <template slot-scope="scope">
          <p>{{ scope.row.sort }}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="主讲老师">
        <template slot-scope="scope">
          <div class="z-display-flex">{{ scope.row.teacher_name }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="上课时间" width="400px">
        <template slot-scope="scope">
          <div v-for="item in courseDate(scope.row)" :key="item">
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="总学生">
        <template slot-scope="scope">
          <p>学生数{{ scope.row.student_num || 0 }}人</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="switchChange($event, scope)"
          ></el-switch>
          <!-- <div> -->

          <span @click="toAddCourse(scope.row)">
            <a>编辑</a>
          </span>

          <el-popconfirm
            title="确定要删除课期？"
            @onConfirm="deleteCourseFn(scope.row)"
          >
            <a slot="reference">删除</a>
          </el-popconfirm>
          <!-- </div> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  periodList,
  coursePeriodPublish,
  coursePeriodClose,
  coursePeriodDelete
} from "@/api/course.js";
import { tableDeleted } from "@/api/api.js";

export default {
  data() {
    return {
      value: false,
      tableData: []
    };
  },
  activated() {
    this.getCoursePeriodList();
  },
  methods: {
    async switchChange(e, sc) {
      if (e) {
        let res = await coursePeriodPublish([
          {
            table_name: "nice_course_period",
            update: [
              {
                status: e ? 1 : 2
              }
            ],
            where: [
              {
                id: sc.row.id
              }
            ]
          }
        ]);
        if (!res[0]) {
          // return
        }
        this.getCoursePeriodList();
      } else {
        let res = await coursePeriodClose([
          {
            table_name: "nice_course_period",
            update: [
              {
                status: e ? 1 : 2
              }
            ],
            where: [
              {
                id: sc.row.id
              }
            ]
          }
        ]);
        if (!res[0]) {
          // return
        }
        this.getCoursePeriodList();
      }

      // if (e) {
      //   this.$message({
      //     message: '状态已开启',
      //     type: 'success'
      //   })
      // } else {
      //   this.$message({
      //     message: '状态已关闭',
      //     type: 'warning'
      //   })
      // }
      // this.getCoursePeriodList()
    },
    setDay(e) {
      let day;
      switch (e) {
        case 1:
          day = "一";
          break;

        case 2:
          day = "二";
          break;
        case 3:
          day = "三";
          break;
        case 4:
          day = "四";
          break;
        case 5:
          day = "五";
          break;
        case 6:
          day = "六";
          break;
        case 7:
          day = "日";
          break;
      }
      return day;
    },
    courseDate(e) {
      let startDate = e.start_date.split(" ")[0].split("-");
      let endDate = e.end_date.split(" ")[0].split("-");
      let frequency = JSON.parse(e.frequency);
      let arr = [
        startDate[0] +
          "年" +
          startDate[1] +
          "月" +
          startDate[2] +
          "日-" +
          endDate[0] +
          "年" +
          endDate[1] +
          "月" +
          endDate[2] +
          "日 "
      ];

      for (let i = 0; i < frequency.length; i++) {
        arr.push(
          " 每周" +
            this.setDay(frequency[i].day_of_Week) +
            frequency[i].start_time.substr(0, 5) +
            "-" +
            frequency[i].end_time.substr(0, 5)
        );
      }
      return arr;
    },
    // 删除数据
    async deleteCourseFn(e) {
      let res = await coursePeriodDelete([
        {
          table_name: "nice_course_period",
          where: { id: [e.id] }
        }
      ]);
      if (res[0]) {
        return;
      }
      this.$message({
        message: "删除成功",
        type: "success"
      });
      this.getCoursePeriodList();
      console.log(e);
    },
    // 获取表数据
    async getCoursePeriodList() {
      let res = await periodList({
        table_name: "nice_course_period",
        course_id: this.$route.query.id
      });
      if (res[0]) {
        return;
      }
      this.tableData = res[1].data;
      console.log(res[1]);
      this.tableData.map(item => {
        item.status === 1 ? (item.status = true) : (item.status = false);
      });
    },
    toAddCourse(e) {
      if (e) {
        this.$router.push({
          name: "add-update-course-term",
          query: {
            course_id: this.$route.query.id,
            id: e.id,
            // period_num: e.sort,
            lesson_num: this.$route.query.lesson_num
          }
        });
      } else {
        this.$router.push({
          name: "add-update-course-term",
          query: {
            course_id: this.$route.query.id,
            // period_num: this.tableData.length + 1,
            lesson_num: this.$route.query.lesson_num
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.m-header-box {
  margin-bottom: 10px;
  margin-bottom: 20px;
  /* text-align: right; */
}
a {
  cursor: pointer;
}
.u-float-right {
  float: right;
  margin-top: -18px;
}
</style>
